<template>
  <div>

    <el-table :data="param.packingTable">
      <el-table-column label="提箱单号" width="220">
        <template v-slot="scope">
          <el-button link @click="choicePacking(scope.row)" style="color:#409EFF;">{{ scope.row.packingNo }}</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="yardName" label="堆场名称"> </el-table-column>
      <el-table-column prop="boxCondition" label="箱况"> </el-table-column>
      <el-table-column label="剩余提箱天数" width="120">
        <template v-slot="scope">
          <span style="color:#66CD00;font-size: 18px;">{{ scope.row.residuePackingDays }}</span> &nbsp;天
        </template>
      </el-table-column>
      <el-table-column prop="packingValidityPeriod" min-width="200" label="提箱单有效期范围"> </el-table-column>
      <el-table-column prop="agentName" label="客户" min-width="200"> </el-table-column>
      <el-table-column prop="status" label="状态"> </el-table-column>
    </el-table>
    <!-- 提箱单信息 -->
    <tixiangdanInfo ref="tixiangdanInfoRef" @tixiangdanInfoClick="txClick"  @tixiangdanInfoListClick="handleShowRecord"></tixiangdanInfo>
    <!-- 提箱记录 -->
    <el-dialog v-model="param.dialogVisiblePackingRecord">
      <packingRecord ref="packingRecordRef" :oprName="'tiXiang'" :rowData="packing"></packingRecord>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { formatDate } from '@/utils'
import { onMounted, ref, watch } from 'vue';
import { downloadPacking, getPackingData, getBoxEastTable, getTable } from '@/api/orderManage/packing'
import { getPackingListById } from '@/api/boxCallBack/order'
import yardInfo from '@/views/components/boxYard/yardInfo.vue'
import packingRecord from '@/views/components/tiXiangManage/packingRecord.vue'
import { getDetailTable, getBoxEastDetailTable } from '@/api/orderManage/packingDetail'
import { ElMessage } from 'element-plus';
import tixiangdanInfo from '@/views/components/order/tixiangdanInfo.vue';
// const emit = defineEmits(['handleClose'])
const param = ref({
  dialogVisible: false,
  containerNoArry: [],
  rentBoxTable: [],
  packingRecordList: []
})
const props = defineProps({
  orderId: {
    type: String,
    default: ''
  },
  rowData: {
    type: Object,
    default: () => { }
  },
})

onMounted(() => {
  showPacking()
})

// watch(() => props.orderId, (newVal, oldVal) => {
//   console.log("*-/-watch*/*-/-")
//   showPacking()
// })

//查看 回调提箱单 列表
const showPacking = () => {
  getPackingListById(props.orderId).then((res: any) => {
    param.value.packingTable = res.data
    param.value.packingTable.forEach(item => {
      item.boxCondition = boxConditionFilter(item.boxCondition)
      item.packingValidityPeriod = formatDate(item.packingValidityPeriodStart, 2) + ' ~ ' + formatDate(item.packingValidityPeriodEnd, 2)
      item.status = statusFilter(item.status)
    })
  })
}

const packingRecordRef = ref({ showRecord: function () { } })
const handleShowRecord = (val) => {
  packing.value=val
  packingRecordRef.value.showRecord()
  param.value.dialogVisiblePackingRecord = true
}

//查看提箱单详情
const packing = ref({})
//提箱单信息
const tixiangdanInfoRef=ref()
const choicePacking = (row: any) => {
  if (!row.id) {
    return ElMessage({ message: '暂无提箱单id信息', type: 'error' })
  }
  tixiangdanInfoRef.value.openBox(row.id)
}


//提箱单信息关闭回调
const txClick=(val)=>{
  packing.value=val
  props.rowData.totalQuantity = packing.value.totalQuantity
    props.rowData.packedQuantity = packing.value.packedQuantity
    props.rowData.packingNo = packing.value.packingNo

}

//过滤
const boxConditionFilter = (val: any) => {
  let result = ''
  const boxConditionList = [{ value: 15, label: '适货' }, { value: 10, label: '次新' }, { value: 20, label: '混提' },{ value: 5, label: '全新' }]
  boxConditionList.forEach((item: { value: any; label: any; }) => {
    if (item.value == val) {
      result = item.label
    }
  })
  return result
}

const statusFilter = (val: any) => {
  // let status: any = { 5: '已下单', 10: '待提未付', 15: '已提未付', 20: '待还未付', 25: '待还已付', 30: '已完成', 35: '已取消' }
  let status: any = { 5: '已发放', 10: '已下载', 15: '提箱中', 20: '已完成' }
  return status[val]
}


defineExpose({
  showPacking
})

</script>
